07. Review the Call Stack

The DevTools has a ton of helpful information! If you're not familiar with them, you really should spend some learning about all of its features. It'll make developing and debugging websites a lot easier! One helpful piece of info that DevTools provides is the JavaScript Call Stack. This displays the order of function calls that are in progress. The function at the bottom of the stack is the first one to run. It calls the second one on the stack…the second calls the third, the third… you get the idea. A function stays on the stack until the one above it returns.

We can click on the bottom function in the stack (the anonymous function) to see that what kicked all this code off was the $.ajax() call for the Unsplash images. That $.ajax() call in turn calls transport.send(), which calls options.xhr(), which creates a new XMLHttpRequest() object!

So the order is:

  1. our code in an anonymous function calls .ajax()
  2. .ajax() calls a .send() method
  3. .send() calls options.xhr()
  4. options.xhr() calls jQuery.ajaxSettings.xhr which creates a new XHR object

_Clicking through the call stack to see the order of function calls_

Clicking through the call stack to see the order of function calls

New XHR Or Reused XHR Quiz

When $.ajax() is called, does the jQuery code create a new XHR object each time or does it create an initial one and reuses it for each subsequent call to .ajax()?
SOLUTION: It creates a new one each time

24_Q - Adding All Headers Quiz

Try working through the .send() function (the third item from the bottom of the call stack) on your own to see how it sets up the newly created XHR object. After reviewing the code, how does it set all of the headers?
SOLUTION: it uses a `for...in` loop

Next Concept